import { Form, Table, Button, Input, Select, Space, Modal } from "antd";
import { useState } from "react";
import { useSelector } from "react-redux";
import LifaMoneyRecord from "../../component/LifaMoneyRecord";




export default function LifaUser() {
    let lifa = useSelector(state => state.lifa)
    let [showUserUpdateModal, setShowUserUpdateModal] = useState(false)
    let [showPayModal, setShowPayModal] = useState(false)
    let [showPayRecordModal, setShowPayRecordModal] = useState(false)

    let openUserEditor = () => { }

    let [form] = Form.useForm();

    let openEditeModal = () => {
        setShowUserUpdateModal(true)
    }

    let openPayModal = () => {
        setShowPayModal(true)
    }

    let openPayRecordModal = () => {
        setShowPayRecordModal(true)
    }

    const columns = [
        {
            title: 'id',
            key: 'id',
            dataIndex: 'id'
        },
        {
            title: '姓名',
            key: 'id',
            dataIndex: 'name'
        },

        {
            title: '卡号/手机号',
            key: 'id',
            dataIndex: 'phone'
        },

        {
            title: '性别',
            key: 'id',
            dataIndex: 'sex'
        },

        {
            title: '余额',
            key: 'id',
            dataIndex: 'countValue'
        },


        {
            title: '会员等级',
            key: 'id',
            dataIndex: 'level'
        },


        {
            title: '创建时间',
            key: 'id',
            dataIndex: 'createdAt'
        },
        {
            title: '操作',
            key: 'id',
            render: (_, record) => (
                <Space size="small">
                    <a onClick={() => openEditeModal(record.name)}>更新</a>
                    <a onClick={() => openPayModal(record.name)}>核销</a>
                    <a onClick={() => openPayRecordModal(record.name)}>记录</a>
                    <a>删除</a>
                </Space>
            ),
        },
    ]

    return (
        <div className="LifaUser">
            <Form form={form} style={{ maxWidth: 'none' }} layout="inline">
                <Form.Item label="卡号">
                    <Input placeholder="请输入会员卡号/手机号" />
                </Form.Item>
                <Form.Item label="等级">
                    <Select defaultValue="VIP0" options={lifa.userLevel} style={{ width: 120 }}></Select>
                </Form.Item>

                <Form.Item label="性别">
                    <Select defaultValue="全部" options={lifa.userSex} style={{ width: 120 }}></Select>
                </Form.Item>

                <Form.Item>
                    <Space>
                        <Button type="primary">搜索</Button>
                        <Button type="default" htmlType="button" onClick={() => openUserEditor()}>创建</Button>
                    </Space>
                </Form.Item>
            </Form>
            <Table size={"small"} columns={columns} dataSource={lifa.userList} style={{ marginTop: 10 }}></Table>
            <Modal title="用户信息更新" maskClosable open={showUserUpdateModal} onCancel={() => setShowUserUpdateModal(false)} footer={null}></Modal>
            <Modal title="用户账户核销" maskClosable open={showPayModal} onCancel={() => setShowPayModal(false)} footer={null} ></Modal>
            <Modal title="用户消费记录" maskClosable open={showPayRecordModal} onCancel={() => setShowPayRecordModal(false)} footer={null}>
                <LifaMoneyRecord/>
            </Modal>
        </div>
    )
}